import React from 'react';
import moment from 'moment';
import BigDatePicker from '../../components/date/BigDatePicker';

import CheckButtons from '../../components/form/CheckButtons';
import { timeTypeList } from './data-conf';

function formatDayData() {
  const now = moment();
  const result = {};
  for (let i = 1; i <= 31; i += 1) {
    const day = i < 10 ? `0${i}` : i;
    result[`${now.format('YYYY-MM')}-${day}`] = [{
      name: '业务量',
      icon: 'flag',
      status: ['ok', 'warn', 'error'][Number.parseInt(Math.random() * 3, 10)],
    }, {
      name: '数据量',
      icon: 'ok-circle',
      status: ['ok', 'warn', 'error'][Number.parseInt(Math.random() * 3, 10)],
    }];
  }
  return result;
}

export default class DataBalance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currTime: moment(),
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      currTime: date,
    });
  }

  render() {
    return (
      <div>
        <CheckButtons
          type="radio"
          data={timeTypeList}
          name="timeType"
          defaultValue="12h"
          style={{ marginBottom: '20px' }}
        />
        <BigDatePicker
          inline
          selected={this.state.currTime}
          onChange={this.handleChange}
          formatDayData={formatDayData()}
        />
      </div>
    );
  }
}
